<template>
  <ul class="select-users__roles">
    <li v-for="role in currentList" :key="role.roleId">
      <div class="">
        <el-checkbox v-if="multiple" :value="isSelectedRole(role)" @change="val => selectRole(val, role)">
          {{ role.name }}
        </el-checkbox>
        <span v-else>
          {{ role.name }}
        </span>
      </div>

      <!-- 用户选择 -->
      <ul v-if="role.users && role.users.length > 0" class="select-users--roles__users">
        <li v-for="user in role.users" :key="user.userId">
          <el-checkbox :value="isSelected(user.userId)" @change="val => selectItem(user)">
            {{ user.username }}
          </el-checkbox>
        </li>
      </ul>
    </li>
  </ul>
</template>
  
<script>
import { roleAndUserTree } from '@/api/system/role';
import { isArray } from '@/utils/validate';

export default {
  name: "roles",

  data() {
    return {
      list: [],
    };
  },

  computed: {
    currentList() {
      if (!this.roles) {
        return this.list;
      }

      if (isArray(this.roles)) {
        return this.list.filter(role => this.roles.includes(role.roleId))
      }

      return this.list.filter(role => this.roles === role.roleId)
    },
    currentValue() {
      if (this.multiple) {
        return this.value || [];
      }
      return this.value || '';
    },
  },

  props: {
    value: {
      type: [Array, String, Number],
      default: null,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    roles: {
      type: [String, Number, Array],
      default: null
    },
  },

  mounted() {
    this.roleAndUserTree();
  },

  methods: {
    async roleAndUserTree() {
      const res = await roleAndUserTree();
      this.list = res.data;
    },
    selectRole(val, role) {
      const users = (role.users || []).map(user => user.userId);
      if (val) {
        this.handleInput([...this.currentValue, ...users.filter(userId => !this.isSelected(userId))]);
      } else {
        this.handleInput(this.currentValue.filter(userId => !users.some(e => e === userId)));
      }
    },
    // 是否选中角色
    isSelectedRole(role) {
      const users = (role.users || []).map(user => user.userId);
      return users.length && users.every((userId) => this.isSelected(userId));
    },
    // 点击选择
    selectItem(user) {
      const isSelected = this.isSelected(user.userId);
      if (this.multiple) {
        if (isSelected) {
          this.handleInput(this.currentValue.filter((u) => u !== user.userId));
        } else {
          this.handleInput([...this.currentValue, user.userId]);
        }
      } else {
        if (isSelected) {
          this.handleInput('');
        } else {
          this.handleInput(user.userId);
        }
      }
    },
    // 是否选中
    isSelected(userId) {
      if (this.multiple) {
        return this.currentValue.some(e => e === userId);
      }
      return this.currentValue === userId;
    },
    handleInput(newValue) {
      this.$emit("input", newValue);
    },
  },
};
</script>
  
<style scoped>
.select-users__roles {
  list-style-type: none;
  padding-left: 20px;
}
.select-users--roles__users {
  padding-left: 20px;
}
</style>